<script lang="ts" setup>
  import { computed } from 'vue';
  import { Button, Dropdown, Doption } from '@arco-design/web-vue';
  import { IconMore } from '@arco-design/web-vue/es/icon';

  interface ActionItem {
    onClick: Fn;
    label: string;
  }
  interface ActionProps {
    dropdownActions: ActionItem[];
    data?: any;
  }

  const props = withDefaults(defineProps<ActionProps>(), {
    dropdownActions: () => [],
  });
  const getDropdownActions = computed(() => {
    return props.dropdownActions.filter(Boolean);
  });
</script>

<template>
  <Dropdown trigger="hover" v-if="getDropdownActions?.length > 0">
    <Button type="text">
      <IconMore />
    </Button>
    <template #content>
      <Doption v-for="item in getDropdownActions" :key="item.label" @click="item.onClick(data)"
        >{{ item.label }}
      </Doption>
    </template>
  </Dropdown>
</template>
